<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2.受控组件</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel"> /* 此处一定要写babel */
    /*****
     * 页面中所有输入类的dom例如input框,随着用户的输入,可以将数据保存到状态中,需要用到数据的时候,从状态中取值的组件 属于受控组件
     * **********/ 
    //1.创建组件
    class Login extends React.Component{
        //初始化状态
        state={
            username:"",
            password:"",
        }
        //保存用户名到状态中
        userName=(event)=>{
            console.log("@@@@@@",event.target.value);
            this.setState({username:event.target.value})
        }
        //保存密码到状态中
        passWord=(event)=>{
            console.log("@@@@@@",event.target.value);
            this.setState({password:event.target.value})
        }
        handleSubmit =(event)=>{
            //阻止表单提交默认刷新页面的行为
            event.preventDefault()
            const {username,password}= this.state
            // const {username,password} = this
            alert(`输入的用户名是${username},我输入的密码是${password}`)
        }
        
       render(){          
            return(
                <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
                用户名:<input onChange={this.userName} type="text" name="username"/>
                密码:<input onChange={this.passWord} type="password" name="password"/>
                <button>登录</button>
                </form>
            )
       }
     }
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>
</body>

</html>